<template>
	<view>
		<view class="u-card-box u-m-b-20" v-for="item in groupList" :key="item.id" @click="goDetail(item)">
			<!-- <view class="u-flex u-row-between u-line-bottom u-p-b-15 u-m-b-15" v-if="[4].includes(groupType) && item.money_log !== null">
				<view :class="item.money_log.status == 1 ? 'fail_tag' : 'success_tag'">{{item.money_log.status == 1 ? '未发放' :'已发放'}}</view>
				<view class="u-font-30 u-font-bold u-color-red u-m-l-10">+{{item.money_log.hand_money}}</view>
			</view> -->
			<view class="u-flex-1 u-flex u-col-top u-ellipsis">
				<view>
					<u-image width="150rpx" height="150rpx" border-radius="20"
						:src="item.head_img"></u-image>
					<view class="u-text-center u-font-24 u-m-t-15 number_box" v-if="item.id && item.name !== '未注册'">
						<view class="u-font-bold u-font-26">{{item.number}}</view>
						<view class="u-font-23 u-m-l-5">能量值</view>
					</view>
				</view>
				<view class="u-flex u-flex-col u-flex-1 u-row-between u-col-top u-ellipsis u-m-l-20 u-p-t-5 u-p-b-5">
					<view class="u-flex u-row-between u-width-100">
						<view class="u-flex">
							<view class="u-flex" v-if="item.id">
								<view class="u-font-title u-m-r-10">{{item.name}}</view>
								<!-- <view class="u-m-r-10" v-if="![0,'0'].includes(item.sex)">
									<u-icon size="32" :color="item.sex == 1 ? '#4399FF' : '#FF69B1'"
										:name="item.sex == 1 ? 'nanxing' : 'nvxing'" custom-prefix="custom-icon" />
								</view> -->
							</view>
							<view v-else>
								<view class="u-font-title u-m-r-10">微信好友</view>
							</view>
							<view class="u-m-r-10" v-if="item.is_authentication == 2">
								<u-icon size="32" color="#FB6316" name="renzheng" custom-prefix="custom-icon" />
							</view>
							<view class="u-m-r-10" v-if="item.is_company_user == 1">
								<u-icon size="32" color="#F8494D" name="qiye1" custom-prefix="custom-icon" />
							</view>
							<view class="u-tag-box" :class="item.president_class"
								v-if="[5,6,7,8].includes(item.president_status) && item.president_class">
								{{ item.president_name }}
							</view>
						</view>
						<view @click.native.stop="openHandle(item)" v-if="[1,2].includes(groupType)">
							<u-icon name="more-dot-fill" size="48"></u-icon>
						</view>
					</view>
					<!-- 来友标签 -->
					<view class="u-m-t-10" v-if="item.label_list && item.label_list.length > 0 && groupType == 2">
						<view class="u-m-r-10 u-font-22 u-color-blue u-border-blue u-radius-20 u-tag-box"
							v-for="tagItem in item.label_list" :key="tagItem.id">{{tagItem.name}}</view>
					</view>
					<view class="u-m-t-12 u-flex u-row-between u-ellipsis u-width-100">
						<view class="u-m-r-10 u-ellipsis">{{item.address || ''}}</view>
						<view v-if="item.is_friend == 0 && item.status == 2 && !recordStatus">
							<!-- <u-icon name="man-add-fill" color="#F96257" size="60"
								@click.native.stop="addPerson(item.id)"></u-icon> -->
							<view class="add_btn" @click.native.stop="addPerson(item.id)">添加好友</view>
						</view>
						<view v-else-if="item.is_friend == 1 || item.is_tea_friend == 1 || recordStatus">
							<u-icon name="bodadianhua" custom-prefix="custom-icon" color="#F96257" size="60"
								@click.native.stop="callMobile(item.phone)"></u-icon>
						</view>
					</view>
					<view class="u-width-100 u-m-t-20 u-flex u-row-around">
						<view class="u-text-center">
							<view class="u-color-gray u-font-24">举办酒局</view>
							<view class="u-font-bold u-font-34 u-m-t-10">{{item.data_num.space || 0}}场</view>
						</view>
						<view class="line"></view>
						<view class="u-text-center">
							<view class="u-color-gray u-font-24">参与酒局</view>
							<view class="u-font-bold u-font-34 u-m-t-10">{{item.data_num.join_num || 0}}场</view>
						</view>
					</view>
					<!-- 通用备注 -->
					<view
						class="u-p-t-10 u-m-t-20 u-width-100 u-font-25 u-color-gray u-ellipsis u-text-line-15 u-border-gray-top"
						v-if="item.remark_content">
						<span>备注：</span>
						<span>{{item.remark_content}}</span>
					</view>
					<!-- 来友 -->
					<view
						class="u-p-t-10 u-m-t-20 u-width-100 u-font-25 u-color-gray u-ellipsis u-text-line-15 u-border-gray-top"
						v-if="item.evaluate_content">
						<span>评价：</span>
						<span>{{item.evaluate_content}}</span>
					</view>
					<!-- 访问、咨询时间 -->
					<view
						class="u-p-t-10 u-m-t-20 u-width-100 u-font-25 u-color-gray u-ellipsis u-text-line-15 u-border-gray-top"
						v-if="groupType == 5">
						<span>{{ recordStatus ? '咨询' : '访问' }}时间：</span>
						<span>{{item.create_time.slice(0,16)}}</span>
					</view>
				</view>
			</view>
			<view class="u-m-t-20 u-flex u-row-between" v-if="groupType == 3">
				<view class="u-flex-1 u-m-r-10 refend_btn" @click.native.stop="apply(2,item.card_id)">拒绝</view>
				<view class="u-flex-1 u-m-l-10 agree_btn" @click.native.stop="apply(1,item.card_id)">同意</view>
			</view>
		</view>

		<!-- 操作弹出框 -->
		<CommonPopup :popupShow="commonPopup.show" :list="commonPopup.list" @onChooseLabel="onChooseLabel"
			@popupClose="commonPopup.show = false"></CommonPopup>
	</view>
</template>

<script>
	import CommonPopup from '@/components/CommonPopup.vue'
	export default {
		props: {
			list: {
				type: Array
			},
			groupType: {
				type: Number,
				default: 0 // 1 好友 2 来友 3 审核 4 奖励金 5 展厅记录
			},
			recordType:{
				type: Number,
				default: 0 // 0 访问 1 咨询
			}
		},
		components:{
			CommonPopup
		},
		data() {
			return {
				groupList: this.list,
				recordStatus: false, // 是否是展厅咨询，咨询无需关系都可拨打电话
				commonPopup: {
					show: false,
					remark: '',
					list: [{
							id: 1,
							name: '删除',
							check: false
						},{
							id: 2,
							name: '备注',
							check: false
						}
					],
				},
				groupData: {}
			}
		},
		watch: {
			list: {
				deep: true,
				handler(val) {
					this.groupList = val
				}
			},
			groupType: {
				handler(val){
					if(val == 1){
						this.commonPopup.list[1].name = '备注'
					}else{
						this.commonPopup.list[1].name = '评价'
					}
				},
				deep: true
			},
			recordType: {
				handler(val){
					if(val == 1){
						this.recordStatus = true
					}else{
						this.recordStatus = false
					}
				}
			}
		},
		methods: {
			goDetail(val) {
				if([1,2,3].includes(this.groupType)){
					uni.navigateTo({
						url: "/teaBureau/teaPersonDetail/teaPersonDetail?id=" + val.id
					})
				}else{
					this.$emit("goDetail", val.id)
				}
			},
			callMobile(val) {
				this.$emit("callMobile", val)
			},
			addPerson(id) {
				this.$emit("addPerson", id)
			},
			apply(type, id) {
				const params = {
					type: type,
					card_id: id
				}
				this.$emit("cardApply", params)
			},
			openHandle(val) {
				this.groupData = val
				switch(this.groupType){
					case 1:
					    this.commonPopup.remark = val.remark_content
						break;
					case 2:
					    this.commonPopup.remark = val.evaluate_content
						break;
				}
				this.commonPopup.show = true
			},
			onChooseLabel(val){
				const params = {
					type: val.id,
					id: val.id == 1 ? this.groupData.card_id : this.groupData.id,
					remark: this.commonPopup.remark
				}
				this.$emit("onChooseLabel",params)
			},
			onSwitchThanksList(id){
				uni.navigateTo({
					url: "/teaBureau/teaThanksList/teaThanksList?id=" + id
				})
			}
		}
	}
</script>

<style scoped>
	.refend_btn {
		background: #868B9A;
		color: #fff;
		padding: 20rpx;
		border-radius: 50rpx;
		text-align: center;
	}

	.agree_btn {
		background: #F96257;
		color: #fff;
		padding: 20rpx;
		border-radius: 50rpx;
		text-align: center;
	}
	
	.fail_tag {
		font-size: 23rpx;
		background: #F84D3F;
		color: #FFF;
		padding: 5rpx 10rpx;
		border-radius: 8rpx;
	}
	
	.success_tag {
		font-size: 23rpx;
		background: #0CB43D;
		color: #FFF;
		padding: 5rpx 10rpx;
		border-radius: 8rpx;
	}
</style>